<template>
  <view class="container">
    <!-- 图片轮播 -->
    <swiper :list="swiperList" height="300" indicator-dots="true" autoplay="true" interval="3000" />

    <!-- 店铺信息 -->
    <view class="shop-info">
      <view class="shop-name">{{ shop.name }}</view>
      <view class="shop-rating">
        <u-rate :value="shop.rating" readonly active-color="#ffd700" />
        <text class="sales">销量：{{ shop.sales }}</text>
      </view>
      <view class="shop-business-hours">营业时间：{{ shop.businessHours }}</view>
      <view class="shop-address">{{ shop.address }}</view>
    </view>

    <!-- 服务列表 -->
    <view class="service-list">
      <view class="service-item" v-for="(service, index) in services" :key="index">
        <checkbox :value="service.name" class="service-checkbox">{{ service.name }}</checkbox>
        <view class="service-price">
          <text class="price">¥{{ service.price }}</text>
          <text class="discount">¥{{ service.discount }}</text>
        </view>
      </view>
    </view>

    <!-- 服务介绍 -->
    <view class="service-intro">
      <text>{{ serviceDescription }}</text>
    </view>

    <!-- 服务评价 -->
    <view class="service-evaluation">
      <view class="evaluation-item" v-for="(evaluation, index) in evaluations" :key="index">
        <view class="evaluation-header">
          <image :src="evaluation.avatar" class="avatar" />
          <view class="evaluation-info">
            <text class="username">{{ evaluation.username }}</text>
            <u-rate :value="evaluation.rating" readonly active-color="#ffd700" />
            <text class="date">{{ evaluation.date }}</text>
          </view>
        </view>
        <view class="evaluation-content">{{ evaluation.content }}</view>
      </view>
    </view>

    <!-- 底部按钮 -->
    <view class="bottom-buttons">
      <button class="contact-customer-service" @click="contactCustomerService">联系客服</button>
      <button class="place-order" @click="placeOrder">立即下单</button>
    </view>
  </view>
</template>


<script setup>
import { ref } from 'vue';
import {onLoad} from "@dcloudio/uni-app"

// 接收参数
onLoad((option) => {
	console.log(option)
})

// 轮播图数据
const swiperList = ref([
  { url: 'https://ts4.cn.mm.bing.net/th/id/OIP-C.CfyIUoZY4dtOeV_oO0LfnwHaE7?w=306&h=204&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2' },
  { url: 'https://ts4.cn.mm.bing.net/th/id/OIP-C.CfyIUoZY4dtOeV_oO0LfnwHaE7?w=306&h=204&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2' },
  { url: 'https://ts4.cn.mm.bing.net/th/id/OIP-C.CfyIUoZY4dtOeV_oO0LfnwHaE7?w=306&h=204&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2' },
]);

// 店铺信息
const shop = ref({
  name: '小王汽车美容店',
  rating: 3,
  sales: 322,
  businessHours: '周一至周五 09:00-22:00',
  address: '山阳区人民中路32号',
});

// 服务列表
const services = ref([
  { name: '精洗', price: 199, discount: 299 },
  { name: '打蜡', price: 299, discount: 399 },
  { name: '抛光', price: 399, discount: 499 },
]);

// 服务介绍
const serviceDescription = ref('服务介绍内容...');

// 服务评价
const evaluations = ref([
  {
    avatar: 'https://via.placeholder.com/60x60',
    username: '李**',
    rating: 5,
    date: '2022-09-10',
    content: '服务评价内容...',
  },
]);

// 联系客服
const contactCustomerService = () => {
  uni.showToast({
    title: '联系客服功能暂未实现',
    icon: 'none',
  });
};

// 立即下单
const placeOrder = () => {
	uni.navigateTo({
		url:"/packageIndex/car-wash/car-wash-confirm-order/car-wash-confirm-order"
	})
  // uni.showToast({
  //   title: '下单功能暂未实现',
  //   icon: 'none',
  // });
};
</script>






<style scoped>
.container {
  padding: 20rpx;
  background-color: #f5f5f5;
}

/* 店铺信息 */
.shop-info {
  background-color: #ffffff;
  padding: 20rpx;
  border-radius: 10rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.shop-name {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.shop-rating {
  display: flex;
  align-items: center;
  margin-top: 10rpx;
}

.sales {
  margin-left: 20rpx;
  font-size: 28rpx;
  color: #666;
}

.shop-business-hours,
.shop-address {
  font-size: 28rpx;
  color: #666;
  margin-top: 10rpx;
}

/* 服务列表 */
.service-list {
  background-color: #ffffff;
  padding: 20rpx;
  border-radius: 10rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.service-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.service-checkbox {
  font-size: 28rpx;
  color: #333;
}

.service-price {
  display: flex;
  align-items: center;
}

.price {
  font-size: 32rpx;
  color: #ff5722;
  margin-right: 10rpx;
}

.discount {
  font-size: 24rpx;
  color: #999;
  text-decoration: line-through;
}

/* 服务介绍 */
.service-intro {
  background-color: #ffffff;
  padding: 20rpx;
  border-radius: 10rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.service-intro text {
  font-size: 28rpx;
  color: #666;
}

/* 服务评价 */
.service-evaluation {
  background-color: #ffffff;
  padding: 20rpx;
  border-radius: 10rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.evaluation-item {
  margin-bottom: 20rpx;
}

.evaluation-header {
  display: flex;
  align-items: center;
  margin-bottom: 10rpx;
}

.avatar {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  margin-right: 10rpx;
}

.evaluation-info {
  flex: 1;
}

.username {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
}

.date {
  font-size: 24rpx;
  color: #999;
  margin-top: 5rpx;
}

.evaluation-content {
  font-size: 28rpx;
  color: #666;
  margin-top: 10rpx;
}

/* 底部按钮 */
.bottom-buttons {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  padding: 20rpx;
  background-color: #ffffff;
  box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.contact-customer-service,
.place-order {
  flex: 1;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  border-radius: 40rpx;
  font-size: 32rpx;
  color: #ffffff;
}

.contact-customer-service {
  background-color: #ff5722;
  margin-right: 20rpx;
}

.place-order {
  background-color: #2196f3;
}
</style>